<template>
  <div class="simple-app">
    <h1>✅ Vue 3 应用正常运行</h1>
    <p>如果你能看到这个页面，说明基础环境正常</p>
    <div class="test-section">
      <h2>组件测试</h2>
      <el-button type="primary">Element Plus 按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
    </div>
    <div class="test-section">
      <h2>状态测试</h2>
      <p>计数器: {{ count }}</p>
      <el-button @click="count++">点击增加</el-button>
    </div>
    <div class="test-section">
      <h2>路由测试</h2>
      <p>当前路径: {{ $route.path }}</p>
      <router-link to="/dashboard">去仪表板</router-link> |
      <router-link to="/modules">去模块列表</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<style scoped>
.simple-app {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.test-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.test-section h2 {
  margin-top: 0;
  color: #409eff;
}

h1 {
  color: #67c23a;
  text-align: center;
}

.el-button {
  margin: 5px;
}
</style>